<template>
    <div app-container>
      <el-row type="flex" justify="center">
        <el-col :span="22">
          <div align="center" style="background-color:#eaedef; height: 60px;">
            <div>
              <span id="mainTitle">借款审核</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="mb8" justify="center" type="flex">
        <el-col :span="20">
          <div>
            <el-descriptions title="审核状态" :column="2" style="font-size:large;">
              <el-descriptions-item label="贷款编号">
                {{this.auditStatus.orderNum}}
              </el-descriptions-item>
              <el-descriptions-item label="当前进度">
                <span style="color:coral;"><dict-tag :options="dict.type.loan_info_applicant_status" :value="this.auditStatus.progressStatus" /></span>
              </el-descriptions-item>
              <el-descriptions-item label="操作员">
                {{this.auditStatus.userName}}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions style="font-size:large;">
              <el-descriptions-item label="初审意见" >
                {{this.auditStatus.auditIdea}}
              </el-descriptions-item>
            </el-descriptions>
            <hr />
          </div>
        </el-col>
      </el-row>
      <el-row class="mb8" justify="center" type="flex">
        <el-col :span="20">
          <div>
            <el-descriptions title="申请产品" size="medium" :column="2" style="font-size:large;">
              <el-descriptions-item label="申请产品">
                <span>{{this.auditStatus.producationName}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="贷款金额">
                <span>￥{{this.auditStatus.loanAmount}}元</span>
              </el-descriptions-item>
              <el-descriptions-item label="渠道">
                <span>{{this.auditStatus.channelName}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="还款方式">
                <dict-tag :options="dict.type.loan_info_payment_method" :value="this.auditStatus.repayMode" />
              </el-descriptions-item>
              <el-descriptions-item label="期数">
                <span>{{this.auditStatus.periods}}期</span>
              </el-descriptions-item>
              <el-descriptions-item label="转换天数">
                <span>{{this.auditStatus.periods*30}}天</span>
              </el-descriptions-item>
              <el-descriptions-item label="综合利率">
                <span>{{(this.auditStatus.loanAmount/this.auditStatus.periods+this.auditStatus.loanAmount/this.auditStatus.periods*this.auditStatus.monRate)/this.auditStatus.loanAmount*100/this.auditStatus.periods}}%</span>
              </el-descriptions-item>
              <el-descriptions-item label="借款利率">
                <span>{{this.auditStatus.monRate*100}}%</span>
              </el-descriptions-item>
              <el-descriptions-item label="罚息计算方式">
                <span>贷款总额/期数*{{~~(this.auditStatus.delayRate*100)}}%</span>
              </el-descriptions-item>
              <el-descriptions-item label="居间服务费">
                <span>￥{{~~(this.auditStatus.loanAmount/this.auditStatus.periods*this.auditStatus.servCharge/10)}}元</span>
              </el-descriptions-item>
            </el-descriptions>
            <hr />
          </div>
        </el-col>
      </el-row>
      <el-row class="mb8" justify="center" type="flex">
        <el-col :span="20">
          <div>
            <el-descriptions title="借款信息" size="medium" :column="2" style="font-size:large;">
              <el-descriptions-item label="贷款金额">
                <span>￥{{this.auditStatus.loanAmount}}元</span>
              </el-descriptions-item>
              <el-descriptions-item label="还款方式">
                <dict-tag :options="dict.type.loan_info_payment_method" :value="this.auditStatus.repayMode" />
              </el-descriptions-item>
              <el-descriptions-item label="分期期数">
                <span>{{this.auditStatus.periods}}期</span>
              </el-descriptions-item>
              <el-descriptions-item label="贷款用途">
                <span>{{this.auditStatus.usage}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="还款来源">
                <span>{{this.auditStatus.paybackOrigin}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="还款保障">
                <span>{{this.auditStatus.paybackGuarantee}}</span>
              </el-descriptions-item>
            </el-descriptions>
            <hr />
          </div>
        </el-col>
      </el-row>
      <el-row class="mb8" justify="center" type="flex">
        <el-col :span="20">
          <div v-for="(one, index) in allData" :key="index">
            <el-descriptions v-if="one.title !='车辆信息' && one.title !='房产信息' " :title="one.title" name="1" size="medium"
              :column="3" style="font-size:large;">
              <el-descriptions-item v-for="(oneone, index1) in one.viewDetails" :key="index1" :label="oneone.fieldName">
                <div v-if="oneone.fieldType != 'pictrue'">
                  <span v-text="oneone.value"></span>
                </div>
                <div v-else-if="oneone.fieldType == 'pictrue'">
                  <el-image style="width: 160px; height: 90px"
                    :src="require('@/views/production/collaborativeProduct/1561390725417.jpeg')" />
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb8" justify="center" type="flex">
        <el-col :span="20">
          <el-descriptions title="历史进件" size="medium" />
          <hr />
          <!-- <el-col :span="20">
            <span>该手机号的历史进件</span>
          </el-col> -->
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb8" justify="center" type="flex">
        <el-col :span="20">
          <el-table :v-loading="this.loading" :data="historyList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column label="申请日期" align="center" prop="" />
            <el-table-column label="姓名" align="center" prop="" />
            <el-table-column label="手机号" align="center" prop="" />
            <el-table-column label="审核状态" align="center" prop="" />
            <el-table-column label="授信额度(元)" align="center" prop="" />
            <el-table-column label="放款订单状态" align="center" prop="" />
            <el-table-column label="还款进度" align="center" prop="" />
            <template slot="empty">
              <el-empty image-size="60"></el-empty>
            </template>
          </el-table>
        </el-col>
      </el-row>
  
      <el-row :gutter="24" class="mb8" justify="center" type="flex">
        <el-col :span="20">
          <el-descriptions title="授信记录" size="medium" />
          <hr />
        </el-col>
      </el-row>
  
      <el-row :gutter="24" class="mb8" justify="center" type="flex">
        <el-col :span="20">
          <el-table :v-loading="this.loading" :data="historyList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column label="操作人" align="center" prop="" />
            <el-table-column label="内容" align="center" prop="" />
            <el-table-column label="时间" align="center" prop="" />
            <template slot="empty">
              <el-empty image-size="60">
                <!-- <el-upload
                  class="upload-demo"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload> -->
              </el-empty>
            </template>
          </el-table>
        </el-col>
      </el-row>
  
      <el-row :gutter="24" class="mb8" justify="center" type="flex">
        <el-col :span="20">
          <el-descriptions title="修改记录" size="medium" />
          <hr />
        </el-col>
      </el-row>
  
      <el-row :gutter="24" class="mb8" justify="center" type="flex">
        <el-col :span="20">
          <el-table :v-loading="this.loading" :data="historyList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column label="操作人" align="center" prop="" />
            <el-table-column label="修改内容" align="center" prop="" />
            <el-table-column label="修改时间" align="center" prop="" />
            <template slot="empty">
              <el-empty image-size="60"></el-empty>
            </template>
          </el-table>
        </el-col>
      </el-row>
      <div class="fixed-button">
          <el-row type="flex" justify="end">
              <el-col :span="6" :offset="5">
                  <el-button type="primary" @click="reback">返回上一个页面</el-button>
              </el-col>
          </el-row>
      </div>
    </div>
    
  </template>
  
  <script>
  
  import { newViewDetails } from '@/api/viewDetails'
  import { findAuditStatus, updateRiskControl } from '@/api/order/secondTrial'
  
  export default {
    name: 'secondTrialDetail',
    dicts: ['sys_normal_disable', 'loan_info_audit_result', 'loan_info_applicant_status', 'loan_info_payment_method'],
    data() {
      return {
        loading: true,
        disabled: true,
        riskControlCheck: false,
        allData: [
          {
            title: '个人信息',
            data: []
          }
        ],
        clientId: undefined,
        loanId: undefined,
        auditStatus: {},
        historyList: {},
        formData: {},
        form: {
          loanId: undefined,
          auditResult: undefined,
          afterManageAdvice: undefined,
          auditIdea: undefined
        }
      }
    },
    created() {
      console.log(this.$route)
      this.loanId = this.$route.params.loanId
      this.clientId = this.$route.params.clientId
      this.getList(this.loanId, this.clientId)
    },
    methods: {
      getList(loanId, clientId) {
        newViewDetails(clientId).then(res => {
          findAuditStatus(loanId).then(response => {
            console.log(response)
            this.auditStatus = response.data
          }).catch()
          this.allData = res.data
        }).catch()
      },
      secondTrial() {
        this.formData = this.auditStatus
        this.riskControlCheck = true
      },
      cancel() {
        this.riskControlCheck = false
        this.reset()
      },
      //重置表单
      reset() {
        this.form = {
          status: '0'
        }
        this.resetForm('form')
      },
      reback(){
        this.$router.go(-1)// 返回上一个页面
        //关闭子页面
        this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
        this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
      },
      submitForm: function () {
        this.$refs['form'].validate(valid => {
          this.form.loanId = this.formData.loanId
          if (valid) {
            // 执行添加/修改请求
            updateRiskControl(this.form).then(res => {
              if (res.code == 200) {
                this.$modal.msgSuccess(res.msg)
              }
              console.log(res)
              debugger
            })
            this.reset()
            this.riskControlCheck = false
            this.$router.go(-1)// 返回上一个页面
            //关闭子页面
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
          }
        })
      }
    }
  }
  </script>
  <style>
  body>.el-container {
    margin-bottom: 40px;
    display: inline-block;
  }
  
  #mainTitle {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    float: left;
    height: 60px;
    margin-top: 10px;
  }
  
  /* 调整整个名字和输入框占的盒子大小 */
  #context {
    float: left;
    /* width: 20%;  */
    margin-left: 50px;
  }
  
  .long {
    width: 1050px;
    margin-left: 50px;
  }
  
  .short {
    float: left;
    /* width: 450px; */
    margin-left: 50px;
  }
  
  .title {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #303133;
    background-color: aqua;
  }
  
  .secondTitle {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bolder;
    color: #303133;
    background-color: aqua;
    height: 35px;
  }
  
  .el-divider--vertical {
    display: inline-block;
    width: 100%;
    height: 1px;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
    color: black;
  }
  
  .el-descriptions__title {
    font-size: x-large;
    font-weight: normal;
  }
  </style>
  